<template>
    <div class="px-8">
        <el-select :disabled="disabled" size="mini" v-model="selected" placeholder="" multiple @change="onSelectChange" popper-class="custom_select_pop" style="width: 100%;">
            <el-option-group v-for="item in computedOptions" :key="item.key" :label="item.label">
                <el-option
                    v-for="item in item.options"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key">
                    <div>
                        <el-checkbox @click.prevent.native="clickHandle" :value="selected.includes(item.key)" @change="(...rest) => onCheckChange(rest)" ></el-checkbox>
                        {{item.label}}
                    </div>
                </el-option>
            </el-option-group>
        </el-select>
    </div>
</template>

<script>
const separator = "=";

export default {
    name: "customSelect",
    props: {
        value: {
            type: Object,
        },
        options: Array,
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // selected: [], // 选中的
            
        };
    },
    watch: {
        // value: {
        //     immediate: true,
        //     handler(n) {
        //         this.updateSelected();
        //     }
        // }
    },
    computed: {
        selected: {
            get() {
                let arr = [];
                let {value, options} = this;
                options?.forEach(item => {
                    let key = item.key;
                    if(value[key] || value[key] === 0 ) {
                        arr.push(`${key}${separator}${value[key]}`)
                    }
                })
                return arr;
            },
            set(n) {
                let obj = {}
                n.forEach(item => {
                    let tem = item.split(separator);
                    obj[tem[0]] = tem[1]
                });
                this.$emit('input', obj);
            }
        },
        computedOptions() {
            let options = this.options;
            let out = (options)?.map(item => {
                return {
                    ...item,
                    options: item.options?.map(v=>{
                        return {
                            ...v,
                            key: `${item.key}${separator}${v.key}`
                        }
                    })
                }

            });
            return out;
        },
        
    },
    mounted() {},
    methods: {
        onSelectChange(...rest){
        },
        onCheckChange(...rest) {

        },
        clickHandle(e) {

        }
    },
};
</script>
<style lang="scss">
.custom_select_pop {
    .el-select-dropdown__list {
        display: flex;
    }
    .el-select-dropdown__item.selected::after {
        // top: 0px !important;
    }
    .el-select-group__wrap:not(:last-of-type)::after {
        display: none;
    }
}

</style>
